<template>
    <div>
        <div v-show="currentPanel == 'default'">
            <el-page-header @back="back" content="添加活动"></el-page-header>

            <div class="interspaceH"></div>

            <el-card>
                <div class="activity_create">
                    <el-form ref="form" :model="createFormData" label-width="150px">
                        <el-form-item label="活动名称">
                            <el-input v-model="createFormData.activityName" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="选择目标人群">
                            <el-button type="primary" size="small" @click="selectMultipleClientVisible = true">多选</el-button>
                            <el-tag v-for="tag in createFormData.clients" :key="tag.name" closable
                                    @close="closeTagHandle(tag)" style="margin-right: 10px"> {{ tag.name }}
                            </el-tag>
                            <el-dialog title="选择目标人群" :visible.sync="selectMultipleClientVisible" width="60%"
                                       :close-on-click-modal="false" :destroy-on-close="true">
                                <MultipleSelect ref="selectMultipleMember" :listFields="listFields" :dataSource="clientList"/>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="selectMultipleClientVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="submitMultipleMember">确 定</el-button>
                                </span>
                            </el-dialog>
                        </el-form-item>
                        <el-form-item label="选择时间类型">
                            <el-radio v-model="createFormData.timeType" label="1">时间段</el-radio>
                            <el-radio v-model="createFormData.timeType" label="2">推送时间</el-radio>
                        </el-form-item>
                        <el-form-item label="活动起止时间" v-if="createFormData.timeType == '1'">
                            <el-date-picker
                                    size="small"
                                    v-model="createFormData.activityTime"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    align="right">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="推送时间" v-if="createFormData.timeType == '2'">
                            <el-date-picker
                                    size="small"
                                    v-model="createFormData.sendTime"
                                    type="datetime"
                                    placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="活动模板">
                            <el-select v-model="createFormData.activityTemplate" placeholder="请选择活动模板" size="small">
                                <el-option v-for="item in activityTemplate" :key="item.value" :label="item.label"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <div v-if="createFormData.activityTemplate != null && createFormData.activityTemplate != ''">
                            <el-form-item label="模板表单内容">
                                <el-card>
                                    <div slot="header" class="clearfix">
                                        <div style="display:flex;justify-content: space-between;align-items: center">
                                            <span>活动表单</span>
                                            <el-button style="padding: 3px 0" type="text" @click="currentPanel = 'set'">
                                                修改表单内容
                                            </el-button>
                                        </div>
                                    </div>

                                    <draggable-item
                                            v-for="(item, index) in drawingList"
                                            :key="item.renderKey"
                                            :drawing-list="drawingList"
                                            :current-item="item"
                                            :index="index"
                                            :active-id="activeId"
                                            :form-conf="formConf"/>
                                </el-card>
                            </el-form-item>
                        </div>
                        <el-form-item>
                            <el-button type="primary"
                                       @click="$message.success('创建成功');$emit('currentHandler', 'default');">立即创建
                            </el-button>
                            <el-button plain @click="back">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
        </div>
        <div v-show="currentPanel == 'set'">
            <SetForm :drawingList="drawingList" :activeId="activeId" @submit="submit" :backParams="backParams" @back="currentPanel = $event"/>
        </div>
    </div>
</template>

<script>
import {formConf} from '@/form_views/components/generator/config'
import DraggableItem from './form'
import SetForm from '@/form_views/views/index/Home.vue'
import drawingDefalut from '@/form_views/components/generator/drawingDefalut'
import MultipleSelect from "@/components/list_multiple_select/list_multiple_select"

export default {
    name: "activity_creat",
    components: {
        DraggableItem,
        SetForm,
        MultipleSelect
    },
    props: {
        activityTemplate: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            selectMultipleClientVisible: false,
            currentPanel: 'default',
            backParams: 'default',
            drawingList: [],
            activeId: "",
            formList: [],
            formConf,
            clientList: [],
            listFields: {
                name:'名称'
            },
            createFormData: {
                activityName: '',
                activityTime: '',
                activityTemplate: '',
                timeType: '1',
                sendTime: '',
                clients: []
            }
        }
    },
    mounted() {
        let data = [...drawingDefalut]
        data = this.shiftData(data)
        this.drawingList = data
        this.activeId = data[0].formId
        this.formList = data

        let that = this
        for (let i = 0; i < 10; i++) {
            that.clientList.push(
                {
                    id: i,
                    name: '名称' + (i + 1)
                }
            )
        }
    },
    beforeDestroy() {
        this.drawingList = this.formList
    },
    methods: {
        back() {
            this.$emit('currentHandler', 'default')
        },
        submit(data, backParams) {
            let drawingList = data.fields
            drawingList = this.shiftData(drawingList)
            this.drawingList = drawingList
            this.activeId = drawingList[0].formId
            this.$message({
                message: '表单提交成功',
                type: 'success'
            });
            this.currentPanel = backParams
        },
        shiftData(data) {
            data.map(item => {
                item.disabled = true
            })
            return data
        },
        submitMultipleMember() {
            let data = this.$refs.selectMultipleMember.getData();
            this.createFormData.clients = data
            this.selectMultipleClientVisible = false
        },
        closeTagHandle(tag) {
            this.createFormData.clients.splice(this.createFormData.clients.indexOf(tag), 1);
        },
    }
}
</script>

<style>
.activity_create .el-card__header {
    padding: 0 20px;
}
</style>